import React, { Component, Fragment } from 'react'
import * as echarts from 'echarts'
import 'echarts/map/js/china'
import jsonp from "jsonp"
import './map.scss'

export default class Map extends Component {
  render() {
    return (
      <Fragment>
        <div id="map"></div>
      </Fragment>
    )
  }
  componentDidMount() {
    this.initEchars()
  }
  initEchars = () => {
    const myChart = echarts.init(document.getElementById('map'))
    // echarts配置
    const option = {
      title: {
        text: "疫情地图",
        link: "https://baidu.com",
        subtext: "疫情地图",
        sublink: "https://baidu.com"
      },
      series: [
        {
          name: "确诊人数",
          type: "map", //告诉echarts要去渲染一个地图
          map: "china",
          label: {
            show: true, // 控制对应地区的汉字
            color: "#333",
            fontSize: 10
          },
          roam: true, //控制地图放大缩小
          zoom: 1.2, //控制地图的放大缩小
          data: [], //用来展示后台给的数据  {name:xx,value:xxx}
          /*      控制地图板块的颜色和边框*/
          itemStyle: {
            areaColor: "#83b5e7",
            borderColor: "yellow" //边框颜色
          },
          /*     控制鼠标滑过之后的背景色和字体颜色*/
          emphasis: {
            label: {
              color: "#fff",
              fontsize: 12
            },
            itemStyle: {
              areaColor: "#83b5e7"
            }
          }
        }
      ],
      visualMap: [
        {
          type: "piecewise",
          show: true,
          pieces: [
            //分段
            { min: 10000 },
            { min: 1000, max: 9990 },
            { min: 100, max: 999 },
            { min: 10, max: 99 },
            { min: 1, max: 9 }
          ],
          inRange: {
            symbol: "rect",
            color: ["#ffc0b1", "#e70520"]
          },
          itemWidth: 20,
          itemHeight: 10
        }
      ],
      tooltip: {
        trigger: "item" //鼠标移入后显示人数
      }
    }
    myChart.setOption(option)
    jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json', {},
      (err, data) => {
        //代表请求数据成功
        if (!err) {
          //从接口获取到数据后，使用map()函数，进行接口数据映射
          let list = data.data.list.map(item => ({
            name: item.name,
            value: item.value
          }))
          option.series[0].data = list;
          myChart.setOption(option)
        }
      }
    )
  }
}
